<template>
  <div>
    <h2>当前求和:{{ sum }}</h2>
    <button @click="sum++">点击+1</button>
    <hr />
    <h2>当前信息为:{{ msg }}</h2>
    <button @click="msg=msg+'!'">修改信息</button>

    <h1>姓名: {{ person.name }}</h1>
    <h1>年龄: {{ person.age }}</h1>
    <h1>薪资: {{ person.job.job1.salary }}k</h1>
    <button @click="person.name+='~'">修改姓名</button>
    <button @click="person.age++">修改年龄</button>
    <button @click="person.job.job1.salary++">涨薪</button>
  </div>
</template>
<script>
import { ref, watch, reactive } from "vue";

export default {
  name: "Demo",
  // watch:{
  //   sum:{
  //     immediate:true,
  //     handler(newVal,oldVal){
  //       console.log(newVal,oldVal)
  //     }
  //   }
  // },
  setup(props, context) {
    let sum = ref(0);

    let msg = ref("你好啊");

    let person = reactive({
      name: "JJ",
      age: 18,
      job: {
        job1: {
          salary: 20
        }
      }
    });

    //情况一:监视ref所定义的一个响应式数据
    watch(
      sum,
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      },
      { immediate: true }
    );

    //情况二:监视ref所定义的多个响应式数据
    watch(
      [sum, msg],
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      },
      { immediate: true }
    );

    //情况三：监视reactive所定义的响应式数据的全部属性
    // 1.oldvalue获取值错误  2.强制开启深度监视(deep:false无效)
    watch(
      person,
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      },
      { deep: false }
    );

    //情况四：监视reactive所定义的响应式数据的某个属性,可以用函数

    // watch(()=>person.age, (newVal, oldVal) => {
    //   console.log(newVal, oldVal);
    // },{deep:false});

    //情况五：监视reactive所定义的响应式数据的某些属性
    // watch([()=>person.age,()=>person.name], (newVal, oldVal) => {
    //   console.log(newVal, oldVal);
    // },{deep:false});

    // 特殊情况
    // watch(()=>person.job, (newVal, oldVal) => {
    //     console.log(newVal, oldVal);
    //   },{deep:true}); //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效
    //返回一个对象，常用
    return {
      sum,
      msg,
      person
    };
  }
};
</script>
  
  <style>
</style>
  
 